import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'react';
import { InputNumber, Table, Radio, DatePicker, Button } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;

const FeeType = forwardRef((props, ref) => {
  const { feeType, value } = props;
  const [data, setData] = useState({});

  useEffect(() => {
    value && setData(JSON.parse(value));
  }, []);

  useImperativeHandle(ref, () => ({
    getData: () => data,
  }));

  const handleChange = (value, key) => {
    const temp = { ...data };
    if (key === 'date') {
      temp[key] = value.join('-');
    } else {
      temp[key] = value;
    }
    setData(temp);
  };

  const handleGradientChange = (value, index, key) => {
    const temp = { ...data };
    temp.gradientList[index][key] = value;
    setData(temp);
  };

  const handleAdd = () => {
    const temp = { ...data };
    const gradientList = temp.gradientList || [];
    gradientList.push({
      min: 0,
      max: 0,
      price: '',
    });
    temp.gradientList = gradientList;
    setData(temp);
  };

  const hanleDelete = (index) => {
    const temp = { ...data };
    temp.gradientList.splice(index, 1);
    setData(temp);
  };

  const gradientColumns = [
    {
      title: '计费数量下限',
      dataIndex: 'min',
      render: (text, { max }, index) => (
        <InputNumber
          min={0}
          max={max | 0}
          value={text}
          onChange={(value) => handleGradientChange(value, index, 'min')}
        />
      ),
    },
    {
      title: '计费数量上限',
      dataIndex: 'max',
      render: (text, _, index) => (
        <InputNumber min={0} value={text} onChange={(value) => handleGradientChange(value, index, 'max')} />
      ),
    },
    {
      title: '计费单价(元)',
      dataIndex: 'price',
      render: (text, _, index) => (
        <InputNumber min={0.01} value={text} onChange={(value) => handleGradientChange(value, index, 'price')} />
      ),
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (_, __, index) => (
        <Button type='text' onClick={() => hanleDelete(index)}>
          删除
        </Button>
      ),
    },
  ];

  const renderFeetypeNodes = () => {
    const { type, price, date = '-', total, gradientList = [] } = data;
    const tempDate = date.split('-');
    switch (feeType) {
      case 1:
        return (
          <>
            <Radio.Group value={type} onChange={(e) => handleChange(e.target.value, 'type')}>
              {['查询计费', '查得计费'].map((item, index) => (
                <Radio key={item} value={index}>
                  {item}
                </Radio>
              ))}
            </Radio.Group>
            <InputNumber
              min={0}
              style={{ margin: '0 15px' }}
              value={price}
              onChange={(value) => handleChange(value, 'price')}
            />
            元
          </>
        );
      case 2:
        return (
          <RangePicker
            value={[
              tempDate[0] ? moment(tempDate[0], 'YYYY.MM.DD') : null,
              tempDate[1] ? moment(tempDate[1], 'YYYY.MM.DD') : null,
            ]}
            format='YYYY.MM.DD'
            onChange={(_, value) => handleChange(value, 'date')}
          />
        );
      case 3:
        return (
          <>
            <InputNumber
              min={0}
              value={total}
              placeholder='总次数'
              onChange={(value) => handleChange(value, 'total')}
              style={{
                marginRight: '15px',
              }}
            />
            <RangePicker
              value={[
                tempDate[0] ? moment(tempDate[0], 'YYYY.MM.DD') : null,
                tempDate[1] ? moment(tempDate[1], 'YYYY.MM.DD') : null,
              ]}
              format='YYYY.MM.DD'
              onChange={(_, value) => handleChange(value, 'date')}
            />
          </>
        );
      case 4:
        return (
          <>
            <Button onClick={handleAdd}>增加</Button>
            <Table
              dataSource={gradientList}
              columns={gradientColumns}
              pagination={false}
              rowKey={(_, index) => index}
            />
          </>
        );
      default:
        break;
    }
  };

  return <div style={{ marginBottom: '20px' }}>{renderFeetypeNodes()}</div>;
});
export default FeeType;
